<script setup>
  import { onMounted, ref } from 'vue'
  import {
    onLoad,
    onShow,
    onReachBottom,
    onPullDownRefresh,
  } from '@dcloudio/uni-app'
  import { http } from '@/utils/http.js'

  // 列表数据
  const activity = ref([])
  const currentPage = ref(1)
  async function getActivityList() {
    const res = await http.request({
      url: '/api/config/activeList',
      method: 'POST',
      data: {
        page: currentPage.value,
        limit: 10,
      },
    })
    activity.value = [...activity.value, ...res.data]
    activity.value.forEach((item) => {
      const currentTimestamp = Math.floor(Date.now() / 1000)
      item.leftTime = item.end_time - currentTimestamp
    })
  }

  function joinIn(item) {
    if (item.type == 1) {
      uni.navigateTo({
        url: `/homePage/activitydetail/index?id=${item.id}`,
      })
    } else {
      if (item.box_type == 1) {
        uni.navigateTo({
          url: `/drawPage/txDraw/index?id=${item.box_id}`,
        })
      } else {
        uni.navigateTo({
          url: `/drawPage/wxDraw/index?id=${item.box_id}`,
        })
      }
    }
  }

  // 上拉加载
  onReachBottom(() => {
    ++currentPage.value
    getActivityList() // 获取的数据列表
  })
  // 下拉刷新
  onPullDownRefresh(() => {
    currentPage.value = 1
    activity.value = []
    getActivityList() // 获取的数据列表
    uni.showToast({
      title: '刷新成功',
      icon: 'success',
      duration: 2000,
    })
    uni.stopPullDownRefresh() // 停止刷新
  })

  onShow(() => {
    activity.value = []
    getActivityList()
  })
</script>

<template>
  <view class="activity-content">
    <view
      class="activity-item"
      v-for="(item, index) in activity"
      :key="'activity' + index"
    >
      <image
        :src="item.img"
        mode=""
        style="width: 100%; height: 310rpx; background: pink; display: block"
      ></image>
      <view class="activity-item-bottom">
        <view class="bottom-left">
          <view class="" style="margin-bottom: 16rpx; font-size: 32rpx">
            {{ item.title }}
          </view>
          <view class="time">
            <text style="margin-right: 15rpx; font-size: 22rpx; color: #9b9b9d"
              >距结束还剩</text
            >
            <uni-countdown
              :font-size="10"
              color="#3d3d3d"
              background-color="#FFE60F"
              :day="Math.floor(item.leftTime / (24 * 60 * 60))"
              :hour="Math.floor((item.leftTime % (60 * 60 * 24)) / (60 * 60))"
              :minute="Math.floor((item.leftTime % (60 * 60)) / 60)"
              :second="Math.floor(item.leftTime % 60)"
              :show-colon="false"
            />
            <!-- <text class="time-square">{{
							Math.floor(item.leftTime / (24 * 60 * 60))
						}}</text>
						<text class="time-word">天</text>
						<text class="time-square">{{
							Math.floor(
								(item.leftTime % (60 * 60 * 24)) / (60 * 60)
							)
						}}</text>
						<text class="time-word">时</text>
						<text class="time-square">{{
							Math.floor((item.leftTime % (60 * 60)) / 60)
						}}</text>
						<text class="time-word">分</text>
						<text class="time-square">{{
							Math.floor(item.leftTime % 60)
						}}</text>
						<text class="time-word">秒</text> -->
          </view>
        </view>
        <view class="bottom-button" @click="joinIn(item)" v-if="item.type == 1">
          查看详情
        </view>
        <view class="bottom-button" @click="joinIn(item)" v-else>
          立即参与
        </view>
      </view>
    </view>
  </view>
</template>

<style lang="scss" scoped>
  .activity-content {
    height: 100vh;
    padding: 30rpx;
    box-sizing: border-box;
    background-color: #f5f5f5;
    .activity-item {
      height: 438rpx;
      margin-bottom: 30rpx;
      box-sizing: border-box;
      background-color: #fff;
      border-radius: 8rpx;
      overflow: hidden;
      .activity-item-bottom {
        display: flex;
        align-items: center;
        justify-content: space-between;
        height: 128rpx;
        width: 100%;
        padding: 0 16rpx;
        box-sizing: border-box;
        .bottom-left {
          display: flex;
          flex-direction: column;
          justify-content: space-between;
          .time {
            display: flex;
            align-items: center;
            .time-square {
              display: inline-block;
              width: 40rpx;
              height: 28rpx;
              background-color: #f5f3fd;
              font-size: 20rpx;
              color: $all-color;
              line-height: 28rpx;
              text-align: center;
            }
            .time-word {
              font-size: 20rpx;
            }
          }
        }
        .bottom-button {
          width: 180rpx;
          height: 60rpx;
          border-radius: 30rpx;
          background-color: $all-color;
          flex-shrink: 0;
          font-size: 28rpx;
          color: #3d3d3d;
          font-weight: 600;
          line-height: 60rpx;
          text-align: center;
        }
      }
    }
  }
  ::v-deep .uni-countdown__number {
    width: 40rpx !important;
    height: 28rpx !important;
    margin: 0 !important;
    line-height: 28rpx !important;
  }
  ::v-deep .uni-countdown__splitor {
    line-height: 28rpx !important;
    padding: 0 4rpx !important;
  }
</style>
